<template>
    <van-popup v-model="showSearch" position="right" :overlay="false" class="searchPopup">
        <div class="search-head-top">
          <div class="search-input">
            <form action="/">
              <van-search
                v-model="searchValue"
                placeholder="请输入搜索关键词"
                show-action
                background="#fff"
                @search="onSearch"
                @cancel="onCancel"
                @focus="onFcous"
                @blur="onBlur"
                id="searchRef"
              >
                <div slot="action" @click="onSearch" v-if="showSearchBtn" class="searchColor">搜索</div>
              </van-search>
            </form>
          </div>
        </div>
        <div class="search-resault-wrapper">
          <div class="search-resault-container">
            <div class="search-resault-content-wrap" v-if="mimeVideoList.length">
              <div class="search-resault-content">
                <h4>图谱课堂</h4>
                <van-row gutter="12">
                  <van-col span="12" v-for="(item,index) in mimeVideoList" :key="index" class="index-list">
                    <router-link :to="{path:baseUrl.video,query:{id:item.id}}">
                      <div class="mime-video-list-container">
                        <div class="mime-video-list-img border-radius5">
                          <img :src="baseUrl.CDNimgUrl + item.image">
                          <template>
                            <span v-if="item.count <= 1">{{item.timer}}</span>
                            <span v-else>共{{item.count}}集</span>
                          </template>
                        </div>
                        <div class="mime-video-list-content">
                          <h4 class="mime-video-list-content-title">{{item.title}}</h4>
                          <van-row>
                            <van-col span='12' class="van-ellipsis">
                              <p>{{item.doctor}}</p>
                            </van-col>
                            <van-col span='12' class="text-align-r">
                              <p>
                                <label class="list-icon-see info-list-icon-see"></label>
                                {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人观看
                              </p>
                            </van-col>
                          </van-row>
                        </div>
                      </div>
                    </router-link>
                  </van-col>
                </van-row>
              </div>
              <div v-if="mimeVideoList.length >= 4">
                <p class="resault-all more-div-wrap van-hairline--top">
                  <router-link :to="{path:'/mime-video-list',query:{keyword:searchValue}}">查看全部</router-link>
                  <i></i>
                </p>
                <div class="resault-line"></div>
              </div>
            </div>
            <div class="search-resault-content-wrap" v-if="mimeInfoList.length">
              <div class="search-resault-content">
                <h4>病例解读</h4>
                <van-row v-for="(item,index) in mimeInfoList" :key="index" class="index-list info-list">
                  <router-link :to="{path:baseUrl.info,query:{id:item.id}}">
                    <van-col span="16">
                      <div class="display-table">
                        <div class="display-table-cell">
                          <h4>{{item.title}}</h4>
                          <van-row>
                            <van-col span='12' class="van-ellipsis">
                              <p>主讲专家：{{item.doctor}}</p>
                            </van-col>
                            <van-col span='12' class='text-align-r'>
                              <p>
                                <label class="list-icon-see info-list-icon-see"></label>
                                {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人阅读
                              </p>
                            </van-col>
                          </van-row>
                        </div>
                      </div>
                    </van-col>
                    <van-col span="7" offset="1" class="text-align-r">
                      <div class="mime-info-list-img border-radius5">
                        <img :src="baseUrl.CDNimgUrl + item.image">
                      </div>
                    </van-col>
                  </router-link>
                </van-row>
              </div>
              <div v-if="mimeInfoList.length >= 4">
                <p class="resault-all more-div-wrap van-hairline--top">
                  <router-link :to="{path:'/mime-info-list',query:{keyword:searchValue}}">查看全部</router-link>
                  <i></i>
                </p>
                <div class="resault-line"></div>
              </div>
            </div>

          </div>
          <div class="noData" v-if="showNoData">暂无数据</div>
        </div>
  </van-popup>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import {Search, Row, Col,Popup} from 'vant'
    export default {
      name: "SearchResault",
      components:{
        [Search.name]: Search,
        [Row.name]: Row,
        [Col.name]: Col,
        [Popup.name]: Popup,
      },
      inject:['reload'],
      mounted() {
        let query = this.$route.query
        ajax.doAction({
          url:`/search?keyword=${query.searchValue}`,
          type: 'POST',
          successCallback:(data)=>{
            console.log(data)
            let datas = data.data
            this.mimeInfoList = datas.cases
            this.mimeVideoList = datas.courses
          },
          errorCallback: (data)=> {
            console.log('请求失败')
          }
        })
      },
      computed:{
        showNoData(){
          if(this.mimeVideoList.length === 0 && this.mimeInfoList.length === 0){
            return true
          }else{
            return false
          }
        }
      },
      updated(){
        if(this.searchValue === ''){
          this.$router.push('/search1')
        }
      },
      data(){
        return {
          baseUrl: {
            'info': '/mime-info-detail',
            'video': 'mime-video-detail',
            'CDNimgUrl': this.GLOBAL.CDNimgUrl,
          },
          mimeInfoList: [],
          mimeVideoList: [],
          showSearch:true,
          searchValue: this.$route.query.searchValue,
          showSearchBtn:false
        }
      },
      methods:{
        onFcous(){
          this.showSearchBtn = true
        },
        onBlur(){
          this.showSearchBtn = false
        },
        onSearch(){
          ajax.doAction({
            url:`/search?keyword=${this.searchValue}`,
            type: 'POST',
            successCallback:(data)=>{
              // console.log(data)
              let datas = data.data
              this.$router.push({
                path: '/search2',
                query: {
                  searchValue:this.searchValue
                }
              })
              this.reload()
            },
            errorCallback: (data)=> {
              console.log('请求失败');
            }
          });
        },
        onCancel(){
          this.$router.push('/search1')
        },
      }
    }
</script>

<style>
  .searchPopup{
    width: 100%;
    height: 100%;
  }
  .search-head-top{
    position: fixed;
    width: 100%;
    left: 0;
    top:0;
    background: #fff;
    z-index: 999;
  }
  .search-head-top .search-input{
    padding: 12px;
  }
  .search-head-top .search-input .van-search{
    padding: 0!important;
  }
  .search-head-top .search-input .van-search__content{
    background: none;
  }
  .search-head-top .search-input .van-search .van-cell{
    background-color: #F2F3F7;
    border-radius: 30px;
    padding: 3px 10px!important;
  }
  .search-head-top .search-input .van-search__action:active{
    background: none;
  }
  .search-head-top .searchColor{
    color: #0085ca;
  }
  .search-resault-wrapper{
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    background: #fff;
  }
  .search-resault-wrapper .search-resault-content{
    padding: 0 12px;
    padding-top: 20px;
  }
  .search-resault-wrapper .search-resault-content h4{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .search-resault-wrapper .resault-all{
    text-align: center;
    padding: 6px 0;
  }
  .search-resault-wrapper .resault-line{
    height: 8px;
    background: #F2F3F7;
  }
  .search-resault-wrapper .noData{
    text-align: center;
    padding: 60px 0;
    color: #b5b5b5;
  }
</style>
